<template>
	<view class="content">
		<swiper autoplay="true" class="banner" >
			<swiper-item>
				<image src="../../static/index_01.jpg" class="banner" mode=""></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/index_01.jpg" class="banner" mode=""></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/index_01.jpg" class="banner" mode=""></image>
			</swiper-item>
		</swiper>
		
		<view class="box">
			<navigator url="../qiyefawubu/qiyefawubu"></navigator>
			<view class="tabbar">
				<view>
					<image src="../../static/icon.png" mode=""></image><text>合同下载</text>
				</view>
				<view>
					<image src="../../static/icon1.png" mode=""></image><text>法律文书查询</text>
				</view>
				<view @click="link('/pages/service/cost/gongsu')">
					<image src="../../static/icon2.png" mode=""></image><text>诉讼费估算</text>
				</view>
				<view @click="link('/pages/service/cost/lvshifeigusuan')">
					<image src="../../static/icon4.png" mode=""></image><text>律师费估算</text>
				</view>
				<view>
					<image src="../../static/icon3.png" mode=""></image><text>失信人查询</text>
				</view>
			</view>
			<view class="list_box">
				<view class="main_bg">
					<text class="title">建立法务部</text>
					<view class="list">
						<view class="item" @click="link('/pages/service/person_service')"></view>
						<view class="item" @click="link('/pages/service/company_service')" style="background-image: url(../../static/itembg1.png);"></view>
					</view>
				</view>
				<view class="main_xins">
					<text class="title">信息直达</text>
					<view class="list">
						<navigator>
							<view @click="link('/pages/liaotian/liaotian')">
								<image src="../../static/zixun.png" mode=""></image>
								<text>在线咨询</text>
							</view>
						</navigator>

						<view @click="link('/pages/tongxunlv/tongxunlv')">
							<image src="../../static/index_011.jpg" mode=""></image>
							<text>电话咨询</text>
						</view>
						<view @click="link('/pages/yuejian/yuejian')">
							<image src="../../static/index_012.jpg" mode=""></image>
							<text>约见律师</text>
						</view>
						<view>
							<image src="../../static/index_013.jpg" mode=""></image>
							<text>普法课堂</text>
						</view>
					</view>
				</view>
				<view class="main_news">
					<text class="title">平台资讯</text>
					<view class="list">
						<view class="item" v-for="item in articles">
							<navigator :url="'/pages/wenzhang/wenzhang?id='+item.id">
								<image src="../../static/index_15.png" mode=""></image>
								<view>
									<text>{{item.title}}</text>
								</view>
							</navigator>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 130rpx;"></view>
		<diy></diy>
	</view>
</template>

<script>
	import diy from '@/components/diy.vue';
	export default {
		components:{
			diy
		},
		data() {
			return {
				articles:[]
			}
		},
		mounted(){
			this.getData();
		},
		methods: {
			getData(){
				let self = this;
				self._get('Article/list',{},function(res){
					console.log(res);
					self.articles = res.data.data;
				},function(res){
					console.log(res);
				});
			}
			,
			takephone(){
				uni.makePhoneCall({
				    phoneNumber: '114' //仅为示例
				});
			},
			link(n) {
				uni.navigateTo({
					url: n,
					animationType: 'pop-in',
					animationDuration: 200
				})
			}
		}
	}
</script>

<style lang="scss">
	view,
	text,
	input,
	textarea {
		box-sizing: border-box;
	}

	page, html {
		background: #f0f5f6;
	}
	.content {
		overflow: hidden;
		width: 100%;
		position: relative;

		.banner {
			width: 100%;
			height: 458rpx;
			display: block;
		}

		.list_box {
			overflow: hidden;

			.main_news {
				overflow: hidden;
				padding: 0 30rpx;

				.title {
					display: block;
					font-size: 28rpx;
					color: #000;
					line-height: 80rpx;
					font-weight: bold;
				}

				.list {
					overflow: hidden;
					width: 100%;
					padding: 15rpx 0;
					background: #fff;
					border-radius: 20rpx;

					.item {
						overflow: hidden;
						width: 100%;
						padding: 15rpx 25rpx;
						display: flex;
						justify-content: space-between;

						image {
							width: 170rpx;
							height: 124rpx;
						}

						view {
							overflow: hidden;
							width: 458rpx;

							text {
								display: block;
								font-size: 25rpx;
								color: #333;
								line-height: 45rpx;
							}
						}
					}
				}
			}

			.main_xins {
				overflow: hidden;
				padding: 0 30rpx;

				.title {
					display: block;
					font-size: 28rpx;
					color: #000;
					line-height: 80rpx;
					font-weight: bold;
				}

				.list {
					overflow: hidden;
					display: flex;
					align-items: center;
					justify-content: space-between;

					view {
						width: 155rpx;
						height: 155rpx;
						overflow: hidden;
						background: #fff;
						border-radius: 20rpx;

						image {
							width: 52rpx;
							height: 55rpx;
							display: block;
							margin: 0 auto;
							margin-top: 38rpx;
						}

						text {
							display: block;
							font-size: 20rpx;
							color: #858585;
							margin-top: 10rpx;
							text-align: center;
						}
					}
				}
			}

			.main_bg {
				overflow: hidden;
				padding: 0 30rpx;

				.title {
					display: block;
					font-size: 28rpx;
					color: #000;
					line-height: 80rpx;
					font-weight: bold;
				}

				.list {
					overflow: hidden;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.item {
						overflow: hidden;
						width: 330rpx;
						height: 155rpx;
						background-size: 100% 100%;
						background-repeat: no-repeat;
						background-image: url(../../static/itembg.png);
						position: relative;
					}
				}
			}
		}

		.box {
			width: 100%;
			border-radius: 35rpx 35rpx 0 0;
			position: relative;
			background: #f0f5f6;
			overflow: hidden;
			top: -25rpx;
			left: 0;
			z-index: 99999;

			.tabbar {
				overflow: hidden;
				width: 100%;
				background: #fff;
				padding-bottom: 20rpx;

				view {
					width: 20%;
					float: left;
					margin-top: 35rpx;

					image {
						width: 83rpx;
						height: 83rpx;
						display: block;
						margin: 0 auto;
						margin-bottom: 15rpx;
					}

					text {
						display: block;
						font-size: 22rpx;
						color: #6b6b6b;
						text-align: center;
					}
				}
			}
		}
	}
</style>
